<!doctype html>
<html lang="{{ config('app.locale') }}">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">

  <link href="{{env('CDN_RESOURCE')}}/css/levelIntro/pc.css" rel="stylesheet" type="text/css">
  <script src="{{env('CDN_RESOURCE')}}/js/jquery-2.1.4.min.js"></script>
  <link rel="shortcut icon" type="image/x-icon" href="../icon/icon_web.png"/>

  <meta name="viewport" content="width=device-width, initial-scale=1">

  <title>课程介绍</title>
</head>
<body>
<div class="wrap" id="wrap" style="padding-top: 0;padding-bottom: 0;">
  <div class="page-content">
    <div>
      <div class="section unit-detail">
        <div class="flag-icon icon"></div>
        <div class="header">Introduction by Unit</div>
        <div class="unit-list" style="display: flex;justify-content: space-between;"></div>
      </div>
    </div>
  </div>
</div>
</body>
</html>
<script type="text/javascript">


  $(document).ready(function () {

    $('#wrap').height(window.innerHeight - 100)

    $(window).resize(function () {
      $('#wrap').height(window.innerHeight - 100)
    })
  })

  var requestUrlArray = window.location.href.split('/')
  var requestCourseId = requestUrlArray[requestUrlArray.length - 1]

  //level 基本信息
  $.getJSON('/levelIntroductionJson/courseIntroduction.json', function (data) {
    var courseInfo = data['course' + requestCourseId]
    $('.num').text(courseInfo.preview.age)
    courseInfo.preview.material.forEach(function (data) {
      if (data !== '') {
        $('.material-list').append('<li class="item"> <span></span>' + data + '</li>')
      } else {
        $('.material-list').append('<li class="item" style="display:none"> <span></span>' + data + '</li>')
      }
    })

    courseInfo.preview.brief.forEach(function (data) {
      $('.brief').append('<p class="item">' + data + '</p>')

    })

    $('.intro-img').attr('src', courseInfo.image)

    courseInfo.objects.scenario.forEach(function (data) {
      $('.scenario-list').append('<li class="item">' + data + '</li>')
    })

    courseInfo.objects.vs.forEach(function (data) {
      $('.vocab-senten').append('<span class="item">' + data + '</span>')
    })

  })

  //level unit 课程信息
  $.getJSON('/levelIntroductionJson/course' + requestCourseId + '.json', function (data) {
    var courseDetail = data
    courseDetail.chapters.forEach(function (data, key) {
      var html = ''

      if (key === 0) {
        html += '<div class="unit active-unit">'
        $('.unit-list').append('<span class="select">Unit ' + (key + 1) + '</span>')
      } else {
        html += '<div class="unit">'
        $('.unit-list').append('<span>Unit ' + (key + 1) + '</span>')
      }

      html +=
        '<table class="unit-content">' +
        '<tr>' +
        '<th class="short"></th>' +
        '<th class="long">Description</th>' +
        '<th class="long">Vocabulary</th>' +
        '<th class="long">' + (courseDetail.seriesId === 3 ? 'Sentence' : 'Sentence') + '</th>' +
        '</tr>'

      data.lessons.forEach(function (unitDetail) {
        var sentence = unitDetail.sentence === '' || unitDetail.sentence === null ? '' : unitDetail.sentence.replace(/\n/g, '<br>')
        html += '<tr>' +

          '<td class="short">Lesson ' + (unitDetail.name || '') + '</td>' +
          '<td class="long">' +
          '<span class="item">' + (unitDetail.description || '') + '</span>' +
          '</td>' +
          '<td class="long">' +
          '<span class="item">' + (unitDetail.vocabulary || '') + '</span>' +
          '</td>' +
          '<td class="long">' +
          '<span class="item">' + (sentence || '') + '</span>' +
          '</td>' +
          '</tr>'
      })

      html += '</table></div>'

      $('.unit-detail').append(html)
    })

    $('.unit-list').append('<div class="u-nav-cursor" id="unavCursor"></div>')
    $('.unit-list span').click(function () {
      var nav = $(this)
      var navIndex = $(this).index()
      nav.fadeOut(125).addClass('select').fadeIn(125).siblings('span').removeClass('select')
      $('#unavCursor').animate({
        left: nav.position().left
      }, 250)
      $('.unit').eq(navIndex).addClass('active-unit').siblings('.unit').removeClass('active-unit')
    })

    if (courseDetail.seriesId === 3) {
      $('#material').text('小故事')
      $('#vocab-senten').text('词汇/高频词句')
    }

  })

</script>

